// index.ts
// 获取应用实例
const app = getApp<IAppOption>()


Page({
  // 状态
  animation: <WechatMiniprogram.Animation>{},
  data: { 
    hour   : <string>"00",
    hourAnimation: <WechatMiniprogram.AnimationExportResult>{},
    minute : <string>"00",
    minuteAnimation: <WechatMiniprogram.AnimationExportResult>{},
    second : <string>"00",
    secondAnimation: <WechatMiniprogram.AnimationExportResult>{},
  },
  //翻转动画
  flipoverAnimation(animation: WechatMiniprogram.Animation){
    animation.rotateX(-90).step({duration: 150}).rotateX(0).step({duration: 150})
  },
  // 更新计时器
  updateTimer(){
    let date = new Date()
    const hour = date.getHours().toString().padStart(2, '0')
    const minute = date.getMinutes().toString().padStart(2, '0')
    const second = date.getSeconds().toString().padStart(2, '0')
    if (hour != this.data.hour) {
      this.flipoverAnimation(this.animation)
      this.setData({
        hourAnimation: this.animation.export()
      })
    }
    if (minute != this.data.minute) {
      this.flipoverAnimation(this.animation)
      this.setData({
        minuteAnimation: this.animation.export()
      })
    }
    this.flipoverAnimation(this.animation)
    this.setData({
      hour: hour,
      minute: minute,
      second: second,
      secondAnimation: this.animation.export()
    })
  },
  interval: <number> 0,
  onLoad() {
    let date = new Date()
    const hour = date.getHours().toString().padStart(2, '0')
    const minute = date.getMinutes().toString().padStart(2, '0')
    const second = date.getSeconds().toString().padStart(2, '0')
    this.setData({
      hour: hour,
      minute: minute,
      second: second,
    })
    this.interval = setInterval(() => {
      this.updateTimer()
    },1000)
    const option: WechatMiniprogram.StepOption = {
      delay: 0,
      duration: 300,
      timingFunction: "ease",
      transformOrigin: "0% 50% 0%"
    }
    this.animation = wx.createAnimation(option)
  },

  onUnload(){
    clearInterval(this.interval)
  }
})
